<template>
    <div class="hello">
        <h1>这是hellowman</h1>
        <div><label>改变vuex的count值</label>
            <input type="button" value="减少" @click="remove">
            <input type="button" value="增加" @click="add">
            <br>
            <br>
        </div>
    </div>
</template>
<script>
export default {
    name: 'HelloMan',
    data() {
        return {
            msg: 's',
            count: 0
        }
    },
    methods: {
        add() {
            // 千万不要这么用，不符合 vuex 的设计理念
            // this.$store.state.count++;
            // this.$store.commit("increment");//直接调用mulations
            this.$store.dispatch('increment')//通过actions的dispatch方法调用
        },
        remove() {
            this.$store.commit("subtract", { c: 3, d: 1 });
        }
    }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
    color: white;
    border: 1px solid blue;
    background-color: grey;
}

span {
    border: 1px solid red;
    padding: 5px 50px;
    background-color: #41E4E2;
}
</style>